<template>
  <div class="app-container home" style="background-color:#13142A; height: 91vh;">
    <div v-if="status" class="content">
      <!--         面板start-->
      <div class="app-sum">
        <ul>
          <li class="add-item-box add-item1">
            <div class="add-item-box-item" @click="gomap">

              <div class="add-item-box-item-title">
                <div class="add-item-box-item-title-box">
                  <img alt="" class="a-i-b-icon" src="../assets/images/navIcon1.png">
                  <div class="a-i-b-text">企业总数</div>
                </div>
                <div class="add-item-box-item-sub">
                  <div class="a-i-b-i-s">数量</div>
                  <div class="a-i-b-i-n">3</div>

                </div>
                <!--                <div class="add-item-box-item-sub">-->
                <!--                  <div class="a-i-b-i-s">全部设备</div>-->
                <!--                  <div class="a-i-b-i-smell-n">3648</div>-->

                <!--                </div>-->
              </div>


              <div class="add-item-box-item-icon">
                <img alt="" class="a-i-b-i-icon1" src="../assets/images/alert.png">
              </div>
            </div>

          </li>
          <li class="add-item-box add-item2">


            <div class="add-item-box-item" @click="goRiskMap">

              <div class="add-item-box-item-title">
                <div class="add-item-box-item-title-box">
                  <img alt="" class="a-i-b-icon" src="../assets/images/navIcon2.png">
                  <div class="a-i-b-text">企业数量</div>
                </div>
                <div class="add-item-box-item-sub">
                  <div class="a-i-b-i-s">异常数量</div>
                  <div class="a-i-b-i-n">3648</div>

                </div>
                <div class="add-item-box-item-sub">
                  <div class="a-i-b-i-s">剩余项目</div>
                  <div class="a-i-b-i-smell-n">1000/1500</div>

                </div>
              </div>


              <div class="add-item-box-item-icon">
                <img alt="" class="a-i-b-i-icon1" src="../assets/images/monitor.png">
              </div>
            </div>


          </li>
          <li class="add-item-box add-item1">

            <div class="add-item-box-item">

              <div class="add-item-box-item-title">
                <div class="add-item-box-item-title-box">
                  <img alt="" class="a-i-b-icon" src="../assets/images/navIcon3.png">
                  <div class="a-i-b-text">运维指标</div>
                </div>
                <div class="add-item-box-item-sub">
                  <div class="a-i-b-i-s">今日故障</div>
                  <div class="a-i-b-i-n">3648</div>

                </div>
                <div class="add-item-box-item-sub">
                  <div class="a-i-b-i-s">今日完成</div>
                  <div class="a-i-b-i-smell-n">1000/1500</div>

                </div>
              </div>


              <div class="add-item-box-item-icon">
                <img alt="" class="a-i-b-i-icon1" src="../assets/images/magnifier.png">
              </div>
            </div>


          </li>
          <li class="add-item-box add-item2">
            <div class="add-item-box-item">

              <div class="add-item-box-item-title">
                <div class="add-item-box-item-title-box">
                  <img alt="" class="a-i-b-icon" src="../assets/images/navIcon4.png">
                  <div class="a-i-b-text">报警信息</div>
                </div>
                <div class="add-item-box-item-sub">
                  <div class="a-i-b-i-s">报警级别</div>
                  <div class="a-i-b-i-n">一般</div>

                </div>
                <div class="add-item-box-item-sub">
                  <div class="a-i-b-i-s">报警内容</div>
                  <div class="a-i-b-i-smell-n">1号单元报警</div>

                </div>
              </div>


              <div class="add-item-box-item-icon">
                <img alt="" class="a-i-b-i-icon1" src="../assets/images/center.png">
              </div>
            </div>

          </li>
        </ul>
      </div>
      <!--         面板end-->
      <!--     中间 start-->
      <div class="content-middle">
        <div class="content-middle-left">
          <div class="c-m-item">
            <div class="c-m-item-title">资源统计>></div>
            <div ref="commandstats" class="echarsPie " style="width: 80%; height:70%; margin: 0 auto"></div>
          </div>
          <div class="c-m-item">
            <div class="c-m-item-title">资源统计>></div>
            <div ref="commandstats2" class="echarsPie " style="width: 80%; height:80%; margin: 0 auto"></div>
          </div>
          <div class="c-m-item">
            <div class="c-m-item-title">资源统计>></div>
            <div ref="commandstats3" class="echarsPie " style="width: 85%; height:85%; margin: 0 auto"></div>
          </div>
          <div class="c-m-item">
            <div class="c-m-item-title">资源统计>></div>
            <div ref="commandstats5" class="echarsPie " style="width: 80%; height:70%; margin: 0 auto"></div>
          </div>
        </div>
        <div class="content-middle-right">
          <div ref="commandstats4" class="echarsPie " style="width: 80%; height:80%; margin: 0 auto"></div>
        </div>
      </div>
      <!--     中间 start-->
      <!--      <div class="content-footer">-->
      <!--        <div class="c-f-item c-left">-->
      <!--          <div class="echarsPie "ref="commandstats"  ></div>-->
      <!--        </div>-->
      <!--        <div class="c-f-item c-right"></div>-->

      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import mapStyle from '@/assets/custom_map_config.json';
import echarts from "echarts";
import {listInfo} from "@/api/enterprise/info";

export default {
  name: "index",
  data() {
    return {
      test1:mapStyle,
      status: true,
      // 版本号
      version: "3.6.0",
      active: false,
      position: {},
      show: false,
      hangyeArr: [],
      from: {},
      markers: [],
      name: "",
      scenicContent: "",

    };
  },
  created() {

  },
  mounted() {
    this.getList();
  },
  methods: {
    gomap() {
      this.$router.push({
        path: "/map/map",

      })
    },

    goRiskMap() {
      this.$router.push({
        path: "/riskMap/riskMap",

      })
    },
    getList() {
      this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
      this.commandstats.setOption({
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [25, 90],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: 40, name: '固定'},
              {value: 38, name: '一般'},
              {value: 32, name: '其他'},
              {value: 30, name: '其他'},

            ]
          }
        ]

      });
      this.commandstats = echarts.init(this.$refs.commandstats2, "macarons");
      this.commandstats.setOption({
        legend: {
          bottom: 10,
          left: 'center',

        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [25, 70],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8,
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = [
                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                  ];
                  return colorList[params.dataIndex]
                }
              }
            },
            data: [
              {value: 40, name: '固定'},
              {value: 38, name: '一般'},
              {value: 32, name: '其他'},
              {value: 30, name: '其他'},

            ]
          }
        ]

      });
      this.commandstats = echarts.init(this.$refs.commandstats3, "macarons");
      this.commandstats.setOption({
        // title: {
        //     text: '动态数据',
        //     subtext: '纯属虚构'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          data: ['最新成交价', '预购队列'],
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }

        },

        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#09CCDE',  //更改坐标轴文字颜色
                fontSize: 14      //更改坐标轴文字大小
              }
            },
          },
          {
            type: 'category',
            boundaryGap: true,
            data: (function () {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(10 - len - 1);
              }
              return res;
            })()
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '价格',
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#09CCDE',  //更改坐标轴文字颜色
                fontSize: 14      //更改坐标轴文字大小
              }
            },
          },
          {
            type: 'value',
            scale: true,
            name: '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#09CCDE',  //更改坐标轴文字颜色
                fontSize: 14      //更改坐标轴文字大小
              }
            },
          }
        ],
        series: [
          {
            name: '预购队列',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: (function () {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(Math.round(Math.random() * 1000));
              }
              return res;
            })(),
            itemStyle: {
              normal: {
                color: "#34ABFF",//折线点的颜色
                lineStyle: {
                  color: "rgba(255, 191, 0)"//折线的颜色
                }
              }
            },
          },
          {
            name: '最新成交价',
            type: 'line',
            data: (function () {
              var res = [];
              var len = 0;
              while (len < 10) {
                res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                len++;
              }
              return res;
            })(),
            itemStyle: {
              normal: {
                color: "rgba(255, 191, 0)",//折线点的颜色
                lineStyle: {
                  color: "rgba(255, 191, 0)"//折线的颜色
                }
              }
            },
          }
        ]
      })
      this.commandstats = echarts.init(this.$refs.commandstats4, "macarons");
      this.commandstats.setOption({
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        // title: {
        //     padding: [50,20],
        //     textStyle:{
        //         color:'#fff',        //颜色
        //         fontStyle:'normal',     //风格
        //         fontWeight:'normal',    //粗细
        //         fontFamily:'Microsoft yahei',   //字体
        //         fontSize:14,     //大小
        //         align:'center'   //水平对齐
        //     },
        //     text: '渐变堆叠面积图'
        // },
        tooltip: {
          trigger: 'axis',
          padding: [20, 20, 100, 100],
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['无使用'],
          y: '80px',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        grid: {
          top: '40%',
          left: '3%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#09CCDE',  //更改坐标轴文字颜色
                fontSize: 14      //更改坐标轴文字大小
              }
            },

          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#09CCDE',  //更改坐标轴文字颜色
                fontSize: 14      //更改坐标轴文字大小
              }
            },
          }
        ],
        series: [
          // {
          //     name: 'Line 1',
          //     type: 'line',
          //     stack: '总量',
          //     smooth: true,
          //     lineStyle: {
          //         width: 0
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //         opacity: 0.8,
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: 'rgba(128, 255, 165)'
          //         }, {
          //             offset: 1,
          //             color: 'rgba(1, 191, 236)'
          //         }])
          //     },
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [140, 432, 501, 164, 7, 340, 250]
          // },
          // {
          //     name: 'Line 2',
          //     type: 'line',
          //     stack: '总量',
          //     smooth: true,
          //     lineStyle: {
          //         width: 0
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //         opacity: 0.8,
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: 'rgba(0, 221, 255)'
          //         }, {
          //             offset: 1,
          //             color: 'rgba(77, 119, 255)'
          //         }])
          //     },
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [120, 282, 111, 234, 220, 340, 310]
          // },
          // {
          //     name: 'Line 3',
          //     type: 'line',
          //     stack: '总量',
          //     smooth: true,
          //     lineStyle: {
          //         width: 0
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //         opacity: 0.8,
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: 'rgba(55, 162, 255)'
          //         }, {
          //             offset: 1,
          //             color: 'rgba(116, 21, 219)'
          //         }])
          //     },
          //     // emphasis: {
          //     //     focus: 'series'
          //     // },
          //     data: [320, 132, 201, 334, 190, 130, 220]
          // },
          // {
          //     name: 'Line 4',
          //     type: 'line',
          //     stack: '总量',
          //     smooth: true,
          //     lineStyle: {
          //         width: 0
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //         opacity: 0.8,
          //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //             offset: 0,
          //             color: 'rgba(255, 0, 135)'
          //         }, {
          //             offset: 1,
          //             color: 'rgba(135, 0, 157)'
          //         }])
          //     },
          //     emphasis: {
          //         focus: 'series'
          //     },
          //     data: [10, 22, 31, 34, 90, 30, 20]
          // },
          {
            name: '无使用',
            // type: 'line',
            stack: '总量',
            // smooth: true,
            lineStyle: {
              width: 0
            },
            type: 'line',
            showSymbol: false,

            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              normal: {
                color: "#386db3",//折线点的颜色
                lineStyle: {
                  color: "rgba(255, 191, 0)"//折线的颜色
                }
              }
            },


            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 191, 0)'
              }, {
                offset: 1,
                color: 'rgba(224, 62, 76)'
              }])
            },
            emphasis: {
              focus: 'series'
            },

            data: [10, 302, 31, 234, 40, 290, 150]
          }
        ]
      });
      this.commandstats = echarts.init(this.$refs.commandstats5, "macarons");
      this.commandstats.setOption({
        // title: {
        //     text: '基础雷达图'
        // },
        // legend: {
        //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            {name: '我的数据', max: 6500},
            {name: '我的数据', max: 16000},
            {name: '我的数据', max: 30000},
            {name: '我的数据', max: 38000},
            {name: '我的数据', max: 52000},
            {name: '我的数据', max: 25000}
          ],
          splitArea: {
            areaStyle: {
              color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
            }
          },
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000, 18000],
              name: '预算分配（Allocated Budget）'
            },
            {
              value: [5000, 14000, 28000, 26000, 42000, 21000],
              name: '实际开销（Actual Spending）'
            }
          ]
        }]
      })
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.app-sum {
  ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;

    .add-item-box {
      width: 24.5%;
      height: 184px;
      background-color: red;
      border-radius: 10px;

      .add-item-box-item {
        display: flex;
        justify-content: space-between;
        padding: 31px 23px;

        .add-item-box-item-title {
          width: 205px;

          .add-item-box-item-title-box {
            height: 36px;
            border-bottom: 1px solid #E9E9E9;
            display: flex;

            .a-i-b-icon {
              width: 22px;
              height: 22px;
              margin-right: 10px;
            }

            .a-i-b-text {
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #DFE9F5;
            }
          }

          .add-item-box-item-sub {
            display: flex;
            align-items: center;
            margin-top: 10px;
            color: #fff;

            .a-i-b-i-s {
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #DFE9F5;
            }

            .a-i-b-i-smell-n {
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #DFE9F5;
              margin-left: 21px;
            }

            .a-i-b-i-n {
              font-size: 24px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              margin-left: 21px;
            }
          }
        }

        .add-item-box-item-icon {
          .a-i-b-i-icon1 {
            width: 112px;
            height: 112px;
          }
        }
      }

    }

    .add-item1 {
      background: url("../assets/images/navBg1.png");
      background-size: 100% 100%;
    }

    .add-item2 {
      background: url("../assets/images/navBg2.png");
      background-size: 100% 100%;
    }

    li {
      list-style: none;
    }
  }


}

.content-middle {
  display: flex;
  width: 100%;
  margin-top: 10px;

  .content-middle-left {
    width: 55%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .c-m-item {
      width: 50%;
      height: 292px;
      background: url("../assets/images/middle-center.png");
      background-size: 100% 100%;

      .c-m-item-title {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #F3F3F3;
        margin-top: 32px;
        margin-left: 42px;
      }
    }
  }

  .content-middle-right {
    width: 45%;
    height: 594px;
    background: url("../assets/images/middle-center.png");
    background-size: 100% 100%;
  }

}

.content-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

  .c-f-item {
    width: 32%;
    height: 350px;
    background-color: red;
  }

  .echarsPie {
    width: 70%;
    height: 50%;
  }

  .c-left {
    width: 40%;
  }

  .c-right {
    width: 58%;
  }
}

.map {
  width: 100%;
  height: 100%;
}
</style>

